﻿<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Dominie - Online Education Courses HTML Template</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" href="${path}/assets/css/vendor.css">
    <link rel="stylesheet" href="${path}/assets/css/style.css">
    <link rel="stylesheet" href="${path}/assets/css/responsive.css">

</head>
<body>

<!-- preloader area start -->
<div class="preloader" id="preloader">
    <div class="preloader-inner">
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
</div>
<!-- preloader area end -->

<!-- search popup start-->
<div class="body-overlay" id="body-overlay"></div>
<div class="td-search-popup" id="td-search-popup">
    <form action="home.jsp" class="search-form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search.....">
        </div>
        <button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
    </form>
</div>
<!-- search popup end-->

<!-- log-in popup start-->
<div class="td-log-in-popup" id="td-log-in-popup">
    <div class="container">
        <div class="row justify-content-center no-gutters">
            <div class="col-lg-5">
                <div class="log-in-wrap">
                    <div class="thumb">
                        <img src="${path}/assets/img/logo-3.png" alt="img">
                    </div>
                    <p>Your student account is you portal to all things Dominie your classroom, projects, forums,
                        carees, resources.</p>
                    <a class="btn btn-white" href="#">Student</a>
                    <a class="btn btn-border-white" href="#">Instructirs</a>
                </div>
            </div>
            <div class="col-xl-6 col-lg-7">
                <div class="log-in-form">
                    <!--  <button type="button" class="close">
                         <span>&times;</span>
                     </button> -->
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="pill" href="#pills-home">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#pills-profile">Register</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="pills-home">
                            <form>
                                <div class="form-group">
                                    <label>Username or email address*</label>
                                    <input type="text" class="form-control" placeholder="youremail@gmail.com">
                                </div>
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" class="form-control">
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input">
                                    <label class="form-check-label">Remember me</label>
                                </div>
                                <a class="lost-password" href="#">Lost your password?</a>
                                <button type="submit" class="btn btn-base w-100">Login</button>
                                <div class="other-log-in-area text-center">
                                    <h6>OR LOGIN WITH</h6>
                                    <a class="btn btn-fb" href="#"><i class="fa fa-facebook"></i>FACEBOOK</a>
                                    <a class="btn btn-google" href="#"><i class="fa fa-google"></i>GOOGLE</a>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="pills-profile">
                            <form>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>Full Name</label>
                                            <input type="text" class="form-control" placeholder="Full Name">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label>User or email*</label>
                                            <input type="text" class="form-control" placeholder="Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Password</label>
                                    <input type="password" class="form-control" placeholder="password">
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input">
                                    <label class="form-check-label">Remember me</label>
                                </div>
                                <a class="lost-password" href="#">Lost your password?</a>
                                <button type="submit" class="btn btn-base w-100">Login</button>
                                <div class="other-log-in-area text-center">
                                    <h6>OR LOGIN WITH</h6>
                                    <a class="btn btn-fb" href="#"><i class="fa fa-facebook"></i>FACEBOOK</a>
                                    <a class="btn btn-google" href="#"><i class="fa fa-google"></i>GOOGLE</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- log-in popup end-->

<!-- navbar start -->
<div class="navbar-area">
    <nav class="navbar navbar-expand-lg">
        <div class="container nav-container">
            <div class="responsive-mobile-menu">
                <button class="menu toggle-btn d-block d-lg-none" data-target="#themefie_main_menu"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-left"></span>
                    <span class="icon-right"></span>
                </button>
            </div>
            <div class="logo">
                <a class="main-logo" href="${path}/home.jsp"><img src="${path}/assets/img/logo.png" alt="img"></a>
            </div>
            <div class="nav-right-part nav-right-part-mobile">
                <a class="search" href="#"><i class="fa fa-search"></i></a>
                <a class="btn btn-base log-in" href="#">Login</a>
            </div>
            <div class="nav-left-part">
                <ul class="nav-left-part-list">
                    <li>
                        <div class="header-cat-menu">
                            <i class="fa fa-th"></i>
                            <a href="#">Courses</a>
                            <i class="fa fa-caret-down"></i>
                            <ul>
                                <li><a href="#"><i class="fa fa-building"></i> Business</a></li>
                                <li><a href="#"><i class="fa fa-th"></i> Design</a></li>
                                <li><a href="#"><i class="fa fa-code"></i> Development</a></li>
                                <li><a href="#"><i class="fa fa-clone"></i> Marketing</a></li>
                                <li><a href="#"><i class="fa fa-pencil-square-o"></i> Math</a></li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <div class="main-search-inner main-search-bg ml-3">
                            <i class="fa fa-search"></i>
                            <input type="text" placeholder="Search Here">
                        </div>
                    </li>
                </ul>
            </div>
            <div class="collapse navbar-collapse" id="themefie_main_menu">
                <ul class="navbar-nav menu-open text-left pl-lg-5">
                    <li class="menu-item-has-children current-menu-item">
                        <a href="#">Home</a>
                        <ul class="sub-menu">
                            <li><a href="home.jsp">Home 01</a></li>
                            <li><a href="index-2.html">Home 02</a></li>
                            <li><a href="home.jsp">Home 03</a></li>
                            <li><a href="index-4.html">Home 04</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children current-menu-item">
                        <a href="#">Pages</a>
                        <ul class="sub-menu">
                            <li><a href="about.html">About</a></li>
                            <li><a href="course.html">Course</a></li>
                            <li><a href="course-view.jsp">Course View</a></li>
                            <li><a href="course-view.jsp">Course View 2</a></li>
                            <li><a href="instructor.html">Instructor</a></li>
                            <li><a href="instructor-single.html">Instructor Single</a></li>
                            <li><a href="cart.html">Cart</a></li>
                            <li><a href="checkout.html">Checkout</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
            <div class="nav-right-part nav-right-part-desktop">
                <a class="btn btn-white log-in" href="#">Login</a>
            </div>
        </div>
    </nav>
</div>
<!-- navbar end -->

<!-- banner start -->
<div class="banner-area style-two" style="background-image:url('${path}/assets/img/banner/2.png')">
    <div class="container">
        <div class="banner-area-inner">
            <div class="row">
                <div class="col-xl-5 col-lg-7 col-md-10">
                    <div class="banner-inner">
                        <h2>Explore your creativity.</h2>
                        <p>Don't wait! Take advantage of courses as low as $11.99.</p>
                        <div class="main-search-inner">
                            <i class="fa fa-search"></i>
                            <input type="text" placeholder="Search for anything">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- banner end -->

<!-- category area start -->
<div class="category-area pd-top-140 pd-bottom-120">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-7 col-lg-8">
                <div class="section-title text-center">
                    <h2>课程类别</h2>
                </div>
            </div>
        </div>
        <c:set var="i" value="0"></c:set>

        <div class="row">
            <c:forEach var="o" items="${courseType}">
                <div class="col-lg-3 col-sm-6">
                    <div class="single-category-inner style-two text-center"
                         style="background-image:url('${path}/assets/img/category/${i=i+1}.png')">
                        <h4>${o.typename}</h4>
                        <h6>超过900门课</h6>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
<!-- category area end -->

<!-- user-exp slider start -->
<div class="user-exp user-exp-area bg-black">
    <div class="container">
        <div class="exp-slider owl-carousel">
            <c:forEach var="o" items="${courseType}">
                <div class="item">
                    <div class="row">
                        <div class="col-xl-7 col-lg-6 order-lg-last">
                            <div class="thumb mb-4 mb-lg-0">
                                <img src="${path}/assets/img/other/1.png" alt="img">
                            </div>
                        </div>
                        <div class="col-xl-5 col-lg-6 order-lg-first align-self-center">
                            <div class="banner-inner">
                                <h2>${o.typename}</h2>
                                <p></p>
                                <div class="btn-wrap mt-5">
                                    <a class="btn btn-base" href="#">Watch Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>

<div class="latest-course-area pd-top-140">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-9">
                <div class="section-title text-center">
                    <h2>世界上最多的课程选择</h2>
                    <p>从每月超过100,000种的在线视频课程中进行选择，每月增加新的选择从每月超过100,000种的在线视频课程中进行选择，每月增加新的内容 </p>
                </div>
            </div>
        </div>
        <div class="row">
            <c:forEach var="o" items="${course}">
                <div class="col-lg-4 col-md-6">
                    <div class="single-course-inner">
                        <div class="thumb">
                            <img src="${path}/assets/img/course/3.png" alt="img">
                            <div class="rating">4.9/5 <i class="fa fa-star"></i></div>
                            <a href="#" class="bookmark"><i class="fa fa-bookmark-o"></i></a>
                        </div>
                        <div class="details">
                            <div class="meta">
                                <div class="row">
                                    <div class="col-6">
                                        <p>5,957 students</p>
                                    </div>
                                    <div class="col-6 text-right">
                                        <p>${o.coursetime}min</p>
                                    </div>
                                </div>
                            </div>
                            <h5><a href="#">${o.coursename}</a></h5>
                            <div class="price-inner">
                                <div class="row">
                                    <div class="col-6">
                                        <p>${o.price}</p>
                                    </div>
                                    <div class="col-6 text-right">
                                        <a href="#"><i class="fa fa-shopping-cart"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
<!-- latest-course end -->

<!-- feedback area start -->
<div class="feedback-intro-area pd-top-110">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7">
                <div class="section-title text-center">
                    <h2 class="title">What our students have to say</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Quis ipsum ultrices </p>
                </div>
            </div>
        </div>
    </div>
    <div class="feedback-slider owl-carousel">
        <div class="item">
            <div class="single-feedback-inner">
                <div class="thumb">
                    <img src="${path}/assets/img/icon/4.png" alt="image">
                </div>
                <div class="details mb-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                        maecenas accumsan lacus vel facilisis.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
                        ultrices gravida.</p>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img src="${path}/assets/img/icon/5.png" alt="img">
                    </div>
                    <div class="media-body align-self-center">
                        <h6>Ramjan Ali Anik</h6>
                        <p>UI & UX Designer</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="single-feedback-inner">
                <div class="thumb">
                    <img src="${path}/assets/img/icon/4.png" alt="image">
                </div>
                <div class="details mb-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                        maecenas accumsan lacus vel facilisis.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
                        ultrices gravida.</p>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img src="${path}/assets/img/icon/5.png" alt="img">
                    </div>
                    <div class="media-body align-self-center">
                        <h6>Ramjan Ali Anik</h6>
                        <p>UI & UX Designer</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="single-feedback-inner">
                <div class="thumb">
                    <img src="${path}/assets/img/icon/4.png" alt="image">
                </div>
                <div class="details mb-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                        maecenas accumsan lacus vel facilisis.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
                        ultrices gravida.</p>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img src="${path}/assets/img/icon/5.png" alt="img">
                    </div>
                    <div class="media-body align-self-center">
                        <h6>Ramjan Ali Anik</h6>
                        <p>UI & UX Designer</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="single-feedback-inner">
                <div class="thumb">
                    <img src="${path}/assets/img/icon/4.png" alt="image">
                </div>
                <div class="details mb-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                        maecenas accumsan lacus vel facilisis.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
                        ultrices gravida.</p>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img src="${path}/assets/img/icon/5.png" alt="img">
                    </div>
                    <div class="media-body align-self-center">
                        <h6>Ramjan Ali Anik</h6>
                        <p>UI & UX Designer</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="single-feedback-inner">
                <div class="thumb">
                    <img src="${path}/assets/img/icon/4.png" alt="image">
                </div>
                <div class="details mb-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                        maecenas accumsan lacus vel facilisis.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
                        ultrices gravida.</p>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img src="${path}/assets/img/icon/5.png" alt="img">
                    </div>
                    <div class="media-body align-self-center">
                        <h6>Ramjan Ali Anik</h6>
                        <p>UI & UX Designer</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="single-feedback-inner">
                <div class="thumb">
                    <img src="${path}/assets/img/icon/4.png" alt="image">
                </div>
                <div class="details mb-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                        maecenas accumsan lacus vel facilisis.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
                        ultrices gravida.</p>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img src="${path}/assets/img/icon/5.png" alt="img">
                    </div>
                    <div class="media-body align-self-center">
                        <h6>Ramjan Ali Anik</h6>
                        <p>UI & UX Designer</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="single-feedback-inner">
                <div class="thumb">
                    <img src="${path}/assets/img/icon/4.png" alt="image">
                </div>
                <div class="details mb-4">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra
                        maecenas accumsan lacus vel facilisis.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
                        ultrices gravida.</p>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img src="${path}/assets/img/icon/5.png" alt="img">
                    </div>
                    <div class="media-body align-self-center">
                        <h6>Ramjan Ali Anik</h6>
                        <p>UI & UX Designer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- feedback area end -->
<!-- blog end -->

<!-- client area Start -->
<div class="client-area pd-top-120">
    <div class="container">
        <div class="row">
            <div class="client-slider owl-carousel owl-theme">
                <div class="item">
                    <div class="thumb">
                        <img src="${path}/assets/img/client/1.png" alt="img">
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="${path}/assets/img/client/2.png" alt="img">
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="${path}/assets/img/client/3.png" alt="img">
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="${path}/assets/img/client/4.png" alt="img">
                    </div>
                </div>
                <div class="item">
                    <div class="thumb">
                        <img src="${path}/assets/img/client/5.png" alt="img">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- back to top area start -->
<div class="back-to-top">
    <span class="back-top"><i class="fa fa-angle-up"></i></span>
</div>
<!-- back to top area end -->


<!-- all plugins here -->
<script src="${path}/assets/js/vendor.js"></script>
<!-- main js  -->
<script src="${path}/assets/js/main.js"></script>
</body>
</html>
